<!doctype html>
<html lang="en">
  <head>
    <script src="index.js" type="module"></script>
    <script src="../../helpers/header.js" type="module"></script>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container text-center">
      <div class="carousel" id="carousel">
        <button class="handle left-handle" id="leftHandle">&lt;</button>
        <button class="handle right-handle" id="rightHandle">&gt;</button>
      </div>

      <form>
        <div>
          <label for="infinite">Infinite scroll</label>
          <input type="checkbox" name="infinite" id="infinite" />
        </div>
        <div>
          <label for="autoplay">Autoplay</label>
          <input type="checkbox" name="autoplay" id="autoplay" />
        </div>
        <div>
          <label for="autoplayInterval">Autoplay Interval</label>
          <input
            type="range"
            name="autoplayInterval"
            id="autoplayInterval"
            min="1000"
            max="5000"
            value="3000"
            step="1000"
            disabled
          />
        </div>
      </form>
    </div>
  </body>
</html>
